<template>
    <div>
        <header class="">
            <img src="../../assets/images/outsource.png" alt="" class="headpic">
        </header>
        <div class="main clearfix">
            <el-row>
                <!-- 菜单 -->
                <el-col :span="6">
                    <el-menu :default-active="$route.path" class="el-menu-vertical-demo" router @select="handselect">
                        <el-submenu index="1">
                            <template slot="title">
                                <span>发包篇</span>
                            </template>
                            <el-menu-item index="/treasure/type">我的需求适合发悬赏还是整包？</el-menu-item>
                            <el-menu-item index="/treasure/describe">如何描述悬赏或者整包需求？</el-menu-item>
                            <el-menu-item index="/treasure/attract">如何让项目更吸引优质开发者？</el-menu-item>
                        </el-submenu>
                        <el-submenu index="2">
                            <template slot="title">
                                <span>竞标篇</span>
                            </template>
                            <el-menu-item index="/treasure/fast">怎么快速选择最靠谱的接包方？</el-menu-item>
                            <el-menu-item index="/treasure/enroll">项目没人报名怎么办？</el-menu-item>
                            <el-menu-item index="/treasure/contract">怎么签订合同最有利？</el-menu-item>
                        </el-submenu>
                        <el-submenu index="3">
                            <template slot="title">
                                <span>实施篇</span>
                            </template>
                            <el-menu-item index="/treasure/manage">如何建立良好的项目管理机制？</el-menu-item>
                            <el-menu-item index="/treasure/prevention">怎么防止项目纠纷？</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-col>
                <!-- 内容 -->
                <el-col :span="18">
                    <router-view v-if="routerAlive"></router-view>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<style>

    html,body{
        background: rgb(251,251,251);
    }
    header{
        background: -webkit-linear-gradient(left, #5fd9ff , #30e4ff); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, #5fd9ff, #30e4ff); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right, #5fd9ff, #30e4ff); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, #5fd9ff , #30e4ff); /* 标准的语法 */
    }
    .headpic{
        width: 1150px;
        display: block;
        margin: 0px auto;
    }
    .main{
        margin: 40px auto 0px;
        max-width: 1150px;
    }
    .main-tab{
        width: 282px;
        background: #fff;
        padding: 36px 0 51px;
    }
    .el-menu{
        border-right: none;
    }    
    .el-menu-item.is-active{
        border-right: 4px solid #1890ff;
    }
</style>

<script>
    export default {
        data(){
            return{
                routerAlive: true,  //渲染状态
            }
        },
        methods: {
            // 切换菜单选项
            handselect(){
                this.routerAlive = false;
                this.$nextTick(()=>{
                    this.routerAlive = true;
                });
            },
        },
        mounted(){
            
        },
    }
</script>
